<!-- 混凝土拌合站产能统计 -->
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--左侧标段数据-->
      <el-col :span="show ? rowObj.T1 : rowObj.F1" :xs="show ? rowObj.T2 : rowObj.F2">
        <workSiteLeft ref="workSiteLeft" :show="show" @showLeft="showLeft" @queryVal="queryVal" />
      </el-col>

      <!--右侧列表数据-->
      <el-col :span="show ? rowObj.T3 : rowObj.F3" :xs="show ? rowObj.T4 : rowObj.F4">
        <!-- tabs标签页 -->
        <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
            <!-- <el-tab-pane label="用料监控" name="first"> -->
              <!-- <First ref="refs" v-if="activeName == 'first'"></First> --> <!-- <First ref="first" v-if="activeName == 'first'"></First> -->
            <!-- </el-tab-pane> -->
            <el-tab-pane label="日产能分析" name="second">
              <el-button style="margin-left: 16px;margin-top: 8px;z-index: 999;position: relative;" size="mini" :icon="show ? 'el-icon-s-fold' : 'el-icon-s-unfold'" circle @click="showLeft(show)"></el-button>
              <Second ref="refs" v-if="activeName == 'second'"></Second> <!-- <Second ref="second" v-if="activeName == 'second'"></Second> -->
            </el-tab-pane>
            <!-- <el-tab-pane label="误差分析" name="third"> -->
              <!-- <Third ref="refs" v-if="activeName == 'third'"></Third> --> <!-- <Third ref="third" v-if="activeName == 'third'"></Third> -->
            <!-- </el-tab-pane> -->
            <el-tab-pane label="产能统计" name="fourth">
              <el-button style="margin-left: 16px;margin-top: 20px;z-index: 999;position: relative;" size="mini" :icon="show ? 'el-icon-s-fold' : 'el-icon-s-unfold'" circle @click="showLeft(show)"></el-button>
              <Fourth ref="refs" v-if="activeName == 'fourth'"></Fourth> <!-- <Fourth ref="fourth" v-if="activeName == 'fourth'"></Fourth> -->
            </el-tab-pane>
            <el-tab-pane label="预警统计" name="warning">
              <el-button style="margin-left: 16px;margin-top: 20px;z-index: 999;position: relative;" size="mini" :icon="show ? 'el-icon-s-fold' : 'el-icon-s-unfold'" circle @click="showLeft(show)"></el-button>
              <Warning ref="refs" v-if="activeName == 'warning'"></Warning> <!-- <Warning ref="warning" v-if="activeName == 'warning'"></Warning> -->
            </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>
  
<script>
import workSiteLeft from "@/views/components/workSiteLeft";
import First from "./first.vue";
import Second from "./second.vue";
import Third from "./third.vue";
import Fourth from "./fourth.vue";
import Warning from "./warning.vue";


export default {
  name: "HntManage",
  data() {
    return {
      show: true,
      rowObj: {
        T1: 3,
        T2: 24,
        T3: 21,
        T4: 24,
        F1: 0,
        F2: 0,
        F3: 24,
        F4: 24,
      },
      activeName: 'second',
    };
  },
  components: {
    workSiteLeft,
    First,
    Second,
    Third,
    Fourth,
    Warning,
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    // 左侧树点击事件
    showLeft(show) {
      this.show = !show;
    },
    queryVal(val) {
      // console.log(val);
      // this.queryParams.id = val.id;
      // console.log(this.$refs.fourth);
      this.$refs.refs.deptId = val.id
    },
  }
};
</script>


  
  
   
  